<template>
    <view class="page">
        <view class="order-prod-deital">
			<text class="no">第{{order_deital.no}}期</text>
			<text class="promotion">【{{order_deital.promotion_id_text}}】</text>
			<text class="name f-one-ellipsis">{{order_deital.goods_name}}</text>
		</view>
        <view class="order-list">
			<view class="item" v-if="item.pay_way_text" v-for="(item,index) in deital_list " :key="index">
				<view class="order-title">订单号：{{item.order_no}}</view>
				<view class="order-price">
					<view class="text">订单金额：</view><view class="num"><text>¥</text>{{item.total_price}}</view>
				</view>
				<view class="order-deital">
					<view class="fex" v-if="item.pay_order_no"><text class="name">支付订单：</text><text class="text">{{item.pay_order_no}}</text></view>
					<view class="fex"><text class="name">购买时间：</text><text class="text">{{item.pay_time_text}}</text></view>
					<view class="fex"><text class="name">支付方式：</text><text class="text">{{item.pay_way_text}}</text></view>
					<view class="fex"><text class="name">支付状态：</text><text class="text">{{item.pay_status_text}}</text></view>
					<view class="fex"><text class="name">购买份数：</text><text class="text">{{item.buy_num}}份</text></view>
				</view>
			</view>
		</view>
        <view class="m-b-loading" v-if="showLoading">
        	<image src="../../static/images/loading2.gif" mode="widthFix"></image>
            <text>加载中</text>
        </view>
		<view class="m-no-data" v-if="showNodata">
			<image src="../../static/images/no_order.png" mode="widthFix"></image>
		</view>
    </view>
</template>
<script>
    import henglang from '@/common/common.js';
    export default {
        data() {
            return {
               deital_list:[],
			   order_deital:[],
			   showLoading: false,
			   showNodata: false,
			   page: 1,
			   totalPages:1,//总页数
			   team_id:''
            };  
        },
        methods: {
            getOrderList(type) {
				let that = this
				if(that.page <= that.totalPages){
					henglang.post('order/getTeamOrder',{team_id:that.team_id,page:that.page},true,function(res){
						that.showLoading = false;
						if (!res.data.data.length) {
							that.showNodata = true;
							return false;
						}
						if (type == 'plus') {
							that.deital_list = that.deital_list.concat(res.data.data);
						} else {
							that.deital_list = res.data.data
							that.order_deital = that.deital_list[0]
							that.totalPages = res.data.total_pages;
						}
					})
				}else{
					that.showLoading = false;
				}
			}
        },
        onLoad({team_id}) {
			let that = this;
			that.showLoading = true;
			that.team_id = team_id;
			that.getOrderList();
        },
        onReachBottom() {
			this.page += 1;
			this.showLoading = true;
			this.getOrderList('plus');
        }
    }
</script>

<style>
	page{
		background: #F5F5F5;
	}
	.order-prod-deital{
		position: fixed;
		z-index: 10;
		top: 0;
		left: 0;
		width: calc(100% - 40upx);
		padding: 0 20upx;
		line-height: 88upx;
		background: #ffffff;
		border-bottom: 2upx solid #DCDCDC;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.order-prod-deital .no{
		border: 2upx solid #D71311;
		color: #D71511;
		line-height: 40upx;
		height: 40upx;
		border-radius: 5upx;
		padding: 0 10upx;
	}
	.order-prod-deital .name{
		width: 300upx;
	}
	.order-list{
		padding: 19upx;
		margin-top: 90upx;
	}
	.order-list .item{
		background: #ffffff;
		border-radius: 3px;
		box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		padding: 20upx;
		margin-bottom: 40upx;
	}
	.order-list .order-title{
		color: #333333;
		font-size: 28upx;
	}
	.order-list .order-price{
		text-align: center;
		border-bottom: 2upx dashed #dcdcdc;
		padding: 40upx 0;
	}
	.order-list .order-price .text{
		display: block;
		color: #999999;
		font-size: 26upx;
	}
	.order-list .order-price .num{
		display: block;
		font-size: 70upx;
	}
	.order-list .order-price .num text{
		margin-right: 10upx;
	}
	.order-deital{
		margin-top: 20upx;
	}
	.order-deital .fex{
		padding: 10upx 0;
	}
	.order-deital .name{
		color: #828080;
		width: 160upx;
		display: inline-block;
	}
</style>
